<script setup>
import {onMounted, ref} from "vue";
import {useForm, usePage} from "@inertiajs/vue3";
import {route} from "ziggy-js";
import {Message} from "@arco-design/web-vue";
import ImageUpload from '@/components/admin/upload/image.vue'
import AppPage from "@/components/admin/layouts/AppPage.vue";

defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
})

const title = '网站设置 - 设置'
const breadcrumbs = ref(['设置', '网站设置'])

const page = usePage()

const form = useForm({
    name: '',
    short_name: '',
    domain: '',
    title: '',
    keywords: '',
    description: '',
    pc_logo: '',
    h5_logo: '',
    copyright: '',
    icp: '',
    status: 1,
    maintenance_reason: '',
    contact_phone: '',
    contact_email: '',
    contact_address: '',
    contact_qq_qrcode: '',
    contact_wechat_qrcode: '',
})

const rules = ref({
    name: [{required: true, message: '请输入网站名称', trigger: 'blur'}],
    short_name: [{required: true, message: '请输入网站简称', trigger: 'blur'}],
    domain: [{required: true,type:'url', message: '请输入网站域名', trigger: 'blur'}],
    title: [{required: true, message: '请输入网站标题', trigger: 'blur'}],
    keywords: [{required: true, message: '请输入网站关键词', trigger: 'blur'}],
    description: [{required: true, message: '请输入网站描述', trigger: 'blur'}],
    pc_logo: [{required: true, message: '请上传PC端logo', trigger: 'change'}],
    h5_logo: [{required: true, message: '请上传H5端logo', trigger: 'change'}],
    copyright: [{required: true, message: '请输入版权信息', trigger: 'blur'}],
    icp: [{required: true, message: '请输入ICP备案号', trigger: 'blur'}],
})
const FormRef = ref()
const handleSubmit = async () => {
    try {
        await FormRef.value.validate()
        form.post(route('admin.setting.website.update'), {
            onSuccess: () => {
                Message.success('保存成功')
            },
            onError: (errors) => {
                console.log(errors)
                const fields = {};
                // 遍历所有错误
                for (const [fieldName, messages] of Object.entries(errors)) {
                    // 构造字段对象
                    fields[fieldName] = {
                        status: 'error',
                        message: messages
                    };
                    FormRef.value.scrollToField(fieldName)
                }
                FormRef.value.setFields(fields);
            }
        })
    } catch (error) {
        console.log(error)
    }
}

onMounted(() => {
    Object.assign(form, page.props.data)
})
</script>

<template>
    <app-page :breadcrumbs :title>
        <a-card :style="{ borderRadius: '8px'}" class="custom-card" title="站点设置">
            <a-form
                ref="FormRef"
                :label-col-props="{ span: 6 }"
                :model="form"
                :rules="rules"
                :wrapper-col-props="{ span: 12 }"
                auto-label-width
                layout="horizontal"
                @submit="handleSubmit"
                :scroll-to-first-error="true"
            >

                <a-divider :margin="40" class="custom-divider" orientation="left">网站状态</a-divider>

                <a-form-item field="status" label="网站状态">
                    <a-radio-group v-model="form.status">
                        <a-radio value="1">开启</a-radio>
                        <a-radio value="0">关闭</a-radio>
                    </a-radio-group>
                </a-form-item>

                <a-form-item field="maintenance_reason" label="维护原因">
                    <a-input
                        v-model.trim="form.maintenance_reason"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入维护原因"
                    />
                </a-form-item>

                <a-divider :margin="40" class="custom-divider" orientation="left">网站信息</a-divider>

                <a-form-item field="name" label="网站名称">
                    <a-input
                        v-model.trim="form.name"
                        :max-length="30"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入网站名称"
                        show-word-limit
                    />
                </a-form-item>

                <a-form-item field="short_name" label="网站简称">
                    <a-input
                        v-model.trim="form.short_name"
                        :max-length="30"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入网站简称"
                        show-word-limit
                    />
                </a-form-item>

                <a-form-item field="domain" label="网站域名">
                    <a-input
                        v-model.trim="form.domain"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入网站域名"
                    />
                </a-form-item>

                <a-form-item field="title" label="网站标题">
                    <a-input
                        v-model.trim="form.title"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入网站标题"
                    />
                </a-form-item>

                <a-form-item field="keywords" label="网站关键词">
                    <a-textarea
                        v-model="form.keywords"
                        :auto-size="{ minRows: 3 }"
                        :max-length="50"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入网站关键词"
                        show-word-limit
                    />
                </a-form-item>

                <a-form-item field="description" label="网站描述">
                    <a-textarea
                        v-model="form.description"
                        :auto-size="{ minRows: 3 }"
                        :max-length="80"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入网站描述"
                        show-word-limit
                    />
                </a-form-item>


                <a-divider :margin="40" class="custom-divider" orientation="left">网站logo</a-divider>

                <a-form-item field="pc_logo" label="PC端logo">
                    <image-upload v-model="form.pc_logo" />
                </a-form-item>

                <a-form-item field="h5_logo" label="H5端logo">
                    <image-upload v-model="form.h5_logo" />
                </a-form-item>

                <a-divider :margin="40" class="custom-divider" orientation="left">网站版权</a-divider>

                <a-form-item field="copyright" label="版权信息">
                    <a-input
                        v-model.trim="form.copyright"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入版权信息"
                    />
                </a-form-item>

                <a-divider :margin="40" class="custom-divider" orientation="left">ICP备案号</a-divider>

                <a-form-item field="icp" label="ICP备案号">
                    <a-input
                        v-model.trim="form.icp"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入ICP备案号"
                    />
                </a-form-item>

                <a-divider :margin="40" class="custom-divider" orientation="left">联系信息</a-divider>

                <a-form-item field="contact_phone" label="联系手机号">
                    <a-input
                        v-model.trim="form.contact_phone"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入联系手机号"
                    />
                </a-form-item>

                <a-form-item field="contact_email" label="联系邮箱">
                    <a-input
                        v-model.trim="form.contact_email"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入联系邮箱"
                    />
                </a-form-item>

                <a-form-item field="contact_address" label="联系地址">
                    <a-input
                        v-model.trim="form.contact_address"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入联系地址"
                    />
                </a-form-item>

                <a-form-item field="contact_qq_qrcode" label="联系QQ二维码">
                    <image-upload v-model="form.contact_qq_qrcode" />
                </a-form-item>

                <a-form-item field="contact_wechat_qrcode" label="联系微信二维码">
                    <image-upload v-model="form.contact_wechat_qrcode" />
                </a-form-item>

                <a-form-item class="mt-10">
                    <a-button html-type="submit" type="primary"> 提交保存 </a-button>
                </a-form-item>
            </a-form>
        </a-card>
    </app-page>
</template>

<style lang="scss" scoped>
.custom-divider{
    border-bottom: 1px solid var(--color-neutral-4);
    :deep(.arco-divider-text){
        font-size: 18px;
        font-weight: bold;
    }
}
</style>
